<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @keyframes cube {
            0% {
                transform: rotateY(0deg) rotateX(0deg);
            }
            50% {
                transform: rotateY(-180deg) rotateX(18deg);
            }
            100% {
                transform: rotateY(-360deg) rotateX(0deg);
            }
        }
      .cube-wrap {
          margin: 100px auto;
          width: 300px;
          height: 100%;
      }
      .cube-wrap .cube {
          width: 300px;
          height: 600px;
          animation: cube 3s linear infinite;
          transform-style: preserve-3d;
      }
      .cube-wrap .cube .cube-top,.cube-wrap .cube .cube-bottom {
          width: 100%;
          height: 50%;
          position: relative;
      }
      .cube-top .cube-item {
          height: 0;
          width: 0;
          top: 169px;
          border-style: solid;
          border-color: transparent transparent rgba(112,112,112,0.1) transparent;
          border-width: 0 50px 130px 50px;
          position: absolute;
          transform-origin: center bottom;
      }
      .cube-bottom .cube-item {
          height: 0;
          width: 0;
          border-style: solid;
          border-color: rgba(212,112,132,0.1) transparent transparent transparent;
          border-width: 130px 50px 0 50px;
          position: absolute;
          transform-origin: center top;
      }
      .cube-top .cube-item:nth-of-type(1) {
          transform: rotateY(0deg) translateZ(88px)  rotateX(42deg);
      }
      .cube-top .cube-item:nth-of-type(2) {
          transform: rotateY(60deg) translateZ(88px)  rotateX(42deg);
      }
      .cube-top .cube-item:nth-of-type(3) {
          transform: rotateY(120deg) translateZ(88px)  rotateX(42deg);
      }
      .cube-top .cube-item:nth-of-type(4) {
          transform: rotateY(180deg) translateZ(88px)  rotateX(42deg);
      }
      .cube-top .cube-item:nth-of-type(5) {
          transform: rotateY(240deg) translateZ(88px)  rotateX(42deg);
      }
      .cube-top .cube-item:nth-of-type(6) {
          transform: rotateY(300deg) translateZ(88px)  rotateX(42deg);
      }

      .cube-bottom .cube-item:nth-of-type(1) {
          transform: rotateY(0deg) translateZ(88px)  rotateX(-42deg);
      }
      .cube-bottom .cube-item:nth-of-type(2) {
          transform: rotateY(60deg) translateZ(88px)  rotateX(-42deg);
      }
      .cube-bottom .cube-item:nth-of-type(3) {
          transform: rotateY(120deg) translateZ(88px)  rotateX(-42deg);
      }
      .cube-bottom .cube-item:nth-of-type(4) {
          transform: rotateY(180deg) translateZ(88px)  rotateX(-42deg);
      }
      .cube-bottom .cube-item:nth-of-type(5) {
          transform: rotateY(240deg) translateZ(88px)  rotateX(-42deg);
      }
      .cube-bottom .cube-item:nth-of-type(6) {
          transform: rotateY(300deg) translateZ(88px)  rotateX(-42deg);
      }


    </style>

</head>
<body>
    <div class="cube-wrap">
        <div class="cube">
            <div class="cube-top">
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
            </div>
            <div class="cube-bottom">
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
                <div class="cube-item">

                </div>
            </div>
        </div>
    </div>
</body>
</html>